<template>
  <h1>员工列表练习</h1>
  <input placeholder="请输入员工姓名" v-model="e.name">
  <input placeholder="请输入员工薪资" v-model="e.salary">
  <input placeholder="请输入员工岗位" v-model="e.post"><br>
  <button @click="add()">添加员工</button>
  <hr>
  <table border="1px">
    <tr>
      <th>序号</th>
      <th>员工姓名</th>
      <th>员工薪资</th>
      <th>员工岗位</th>
    </tr>
    <tr v-for="(e,index) in arr">
      <td>{{index+1}}</td>
      <td>{{e.name}}</td>
      <td>{{e.salary}}</td>
      <td>{{e.post}}</td>
    </tr>
  </table>
</template>

<script setup>

import {ref} from "vue";
// 接收数据的时候需要定义对象和接收的数组
const e =ref({name:'',salary:'',post:''})
const arr = ref([]);
// 定一个方法
const add = () => {
  let newEmp={
      name:e.value.name,
      salary:e.value.salary,
      post:e.value.post
  }
  arr.value.push(newEmp);
  e.value.name='';
  e.value.salary='';
  e.value.post='';
}
</script>

<style scoped>

</style>